<template>
    <div>
        <el-breadcrumb separator="/" style="margin-bottom:20px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-setting" style="margin-right:4px;"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>酒店列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="primary" @click="addConHotel" style="margin-bottom:20px;">添加子酒店</el-button>
        <el-table :data="tableData" border style="width: 100%" v-loading.lock="loading">
            <el-table-column prop="hotel_name" label="酒店名称" width="180">
            </el-table-column>
            <el-table-column prop="site" label="酒店地址">
            </el-table-column>
            <el-table-column prop="phone" label="酒店电话号码">
            </el-table-column>
            <!--<el-table-column prop="location" label="城市" width="100" :filters="selectCity" :filter-method="filterTag" filter-placement="bottom-end">-->
            <el-table-column prop="location" label="区域" width="100" filter-placement="bottom-end">
                <template scope="scope">
                    <el-tag close-transition>{{scope.row.location}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="hotel_type" label="标签" width="100" filter-placement="bottom-end">
                <template scope="scope">
                    <el-tag :type="scope.row.hotel_type === 0 ? 'primary' : 'success'" close-transition>{{scope.row.hotel_type === 0 ? '子酒店' : '主酒店'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <router-link :to="'conList/' + scope.row.hotel_id">
                        <el-button size="small">
                            编辑
                        </el-button>
                    </router-link>
                    <!--<router-link :to="'config/' + scope.row.hotel_id">
                                        <el-button size="small">
                                            配置
                                        </el-button>
                                    </router-link>-->
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row,scope.row.hotel_type)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            cityAll: [],
            selectCity: [],
            loading: true
        }
    },
    mounted() {
        this.$http.post(this.ajaxUrl() + "/index/conInquire?id=" + this.$store.state.grogshop.hotelId).then((res) => {
            if (res.data.city) {
                if (res.data.city.length != 0) {
                    this.cityAll = res.data.city.split(",");

                    for (let i = 0; i < this.cityAll.length; i++) {
                        this.selectCity.push({
                            value: this.cityAll[i],
                            text: this.cityAll[i]
                        });
                    }
                }
            }
        })
        this.toLoad();
    },
    methods: {
        handleDelete(index, row, type) {
            let hint = ""
            if (type === 0) {
                hint = "此操作将永久删除该酒店, 是否继续?"
            } else if (type === 1) {
                hint = "此操作将永久删除该集团酒店和其子酒店, 是否继续?"
            }
            this.$confirm(hint, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get(this.ajaxUrl() + '/index/grogshopDelete', {
                    params: {
                        id: row.hotel_id
                    }
                }).then((res) => {
                    if (res.data.sort === 1) {
                        let _this = this;
                        this.$message({
                            message: '酒店删除成功！',
                            type: 'success',
                            duration: 1000,
                        });
                        this.toLoad();
                    } else {
                        this.$message.error('酒店删除失败！');
                    }
                })
            }).catch(() => {

            });
        },
        addConHotel() {
            this.$router.push('/conList/0');
        },

        toLoad() {
            let host = [];
            let son = [];
            this.$http.get(this.ajaxUrl() + "/index/conGrogshop?id=" + this.$store.state.grogshop.hotelId).then((res) => {
                res.data.forEach((element, index) => {
                    if (element.hotel_type === 1) {
                        host[0] = element;
                    } else if (element.hotel_type === 0) {
                        son.push(element)
                    }
                }, this);

                son.forEach((element, index) => {
                    host.push(element);
                })

                this.tableData = host;
                this.loading = false
            })
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.location === value;
        }
    }
}
</script>